<template>
  <div class="key-personnel">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>异常记录预警</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="4">
          <el-date-picker
            style="width: 100%"
            v-model="formData.times"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          ></el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-input v-model="formData.searchKey" placeholder="请输入专业、班级" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="formData.id_card" placeholder="请输入身份证号" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="formData.des" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchBtn">搜索</el-button>
        </el-col>
      </el-row>

      <div class="student-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          ref="queryTable"
          :api="sqlData"
        >
          <!-- <template v-slot:btn="{ scope }">
            <el-button type="primary">取消关注</el-button>
          </template> -->
        </QueryTable>
      </div>
    </el-card>
  </div>
</template>

<script>
import QueryTable from '@/components/queryTable/index.vue';
import QuerySearch from '@/components/querySearch/index.vue';
import { warnlist } from '@/api/comment/permission';
import moment from 'moment';

export default {
  components: {
    QueryTable,
    QuerySearch
  },
  data() {
    return {
      sqlData: warnlist,
      //配置文件
      displayContent: {
        height: '58vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {
        // 使用moment获取本月第一天和最后一天
        times: [
          moment().startOf('month').format('YYYY-MM-DD'), // 本月第一天
          moment().endOf('month').format('YYYY-MM-DD') // 本月最后一天
        ]
      }, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'name',
          label: '姓名',
          width: '120',
          align: 'center'
        },
        {
          prop: 'no',
          label: '学/工号',
          width: '150',
          align: 'center'
        },
        {
          prop: 'community_name',
          label: '校区',
          width: '100',
          align: 'center'
        },
        {
          prop: 'des',
          label: '异常类型',
          width: '100',
          align: 'center'
        },
        {
          prop: 'day',
          label: '日期',
          width: '120',
          align: 'center'
        },
        {
          prop: 'id_card',
          label: '身份证号',
          width: '180',
          align: 'center'
        },
        {
          prop: 'merge_name',
          label: '组织架构',
          align: 'center'
        }

        // {
        //   label: '操作',
        //   prop: 'btn',
        //   width: '100px',
        //   align: 'center',
        //   fixed: 'right',
        //   sockets: true
        // }
      ],
      options: [
        {
          value: '早出',
          label: '早出'
        },
        {
          value: '晚归',
          label: '晚归'
        },
        {
          value: '未归',
          label: '未归'
        },
        {
          value: '无通行数据',
          label: '无通行数据'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    searchBtn() {
      this.$nextTick(() => {
        this.$refs.queryTable.handleCurrentChange(1);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.key-personnel {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;

  .student-table {
    margin-top: 15px;
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
